<template>
  <div id="recruitlist">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item>公开招聘</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxd" style="margin-top:10px">
      <!--列表-->
      <h1>项目列表</h1>
      <el-table :data="selectionlist" highlight-current-row v-loading="listLoading" style="width: 100%;" :height="tableHeight" border id="selectionindexlist" row-key="personId"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column label="年度" align="center" prop="theYear" width="60" />
        <el-table-column label="标题（批次）" prop="title">
          <template slot-scope="scope">
            {{scope.row.title}}（第{{scope.row.batch}}批）
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" width="120">
          <template slot-scope="scope">
            {{ftypename(scope.row.batchType)}}
          </template>
        </el-table-column>
        <el-table-column label="计划申报" width="80">
          <template slot-scope="scope">
            <el-badge style="float:right" v-if="scope.row.planDeclareNew&&scope.row.planDeclareState===5" is-dot class="item"> </el-badge>
            <i v-if="scope.row.planDeclareState===0" @click="doit(scope.row.id,1)" class="custom icon_c_1" style="cursor: pointer;" />
            <el-tooltip v-else-if="scope.row.planDeclareState===1" :content="scope.row.planDeclareSubmitTime+'提交'" placement="top" :open-delay="600">
              <i :class="'custom icon_c_2'" @click="doit(scope.row.id,1)" style="cursor: pointer;" />
            </el-tooltip>
            <el-tooltip v-else-if="scope.row.planDeclareState===5" :content="scope.row.planDeclareSubmitTime+'退回，原因：'+scope.row.planDeclareRemark" placement="top" :open-delay="600">
              <i :class="'custom icon_c_3'" @click="doit(scope.row.id,1)" style="cursor: pointer;" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="计划下达" width="80">
          <template slot-scope="scope">
            <el-badge style="float:right" v-if="scope.row.planReleaseNew" is-dot class="item"> </el-badge>
            <i v-if="scope.row.planReleaseState===0" class="custom icon_c_0" />
            <el-tooltip v-else-if="scope.row.planReleaseState===1" :content="scope.row.planReleaseSubmitTime+'下达'" placement="top" :open-delay="600">
              <i :class="'custom icon_c_2'" @click="doit(scope.row.id,2)" style="cursor: pointer;" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="岗位对接方案" width="110">
          <template slot-scope="scope">
            <el-badge style="float:right" v-if="scope.row.jobDockingNew&&scope.row.jobDockingState===5" is-dot class="item"> </el-badge>
            <i v-if="scope.row.batchType===2||scope.row.jobDockingState===-1" :class="'custom icon_c_-1'" />
            <i v-else-if="scope.row.jobDockingState===0" class="custom icon_c_1" @click="doit(scope.row.id,3)" style="cursor: pointer;" />
            <el-tooltip v-else-if="scope.row.jobDockingState===1" :content="scope.row.jobDockingSubmitTime+'提交'" placement="top" :open-delay="600">
              <i :class="'custom icon_c_2'" @click="doit(scope.row.id,3)" style="cursor: pointer;" />
            </el-tooltip>
            <el-tooltip v-else-if="scope.row.jobDockingState===5" :content="scope.row.jobDockingSubmitTime+'退回，原因：'+scope.row.jobDockingRemark" placement="top" :open-delay="600">
              <i :class="'custom icon_c_3'" @click="doit(scope.row.id,3)" style="cursor: pointer;" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="招聘公告" width="350">
          <template slot-scope="scope">
            <i v-if="scope.row.announcementState===-1" :class="'custom icon_c_-1'" />
            <el-steps v-else :active="scope.row.announcementState===5?0:scope.row.announcementState" finish-status="success" :process-status="(scope.row.announcementState===0||scope.row.announcementState===5||scope.row.announcementState===3)?'finish':(scope.row.announcementState===5?'error':'process')">
              <el-step :title="scope.row.announcementState===5?'退回':'填报'" icon="el-icon-edit" @click.native="doit(scope.row.id,4)" style="cursor: pointer;"></el-step>
              <el-step title="预审" icon="el-icon-s-claim"></el-step>
              <el-step title="终审" icon="el-icon-s-claim"></el-step>
              <el-step v-if="scope.row.announcementState===3||scope.row.announcementState===4" title="发布" icon="el-icon-s-order" @click.native="doit(scope.row.id,4)" style="cursor: pointer;"></el-step>
              <el-step v-else title="发布" icon="el-icon-s-order"></el-step>
            </el-steps>
          </template>
        </el-table-column>
        <el-table-column label="面试考官备案" width="110">
          <template slot-scope="scope">
            <el-badge style="float:right" v-if="scope.row.interviewerFilingNew&&scope.row.interviewerFilingState===5" is-dot class="item"> </el-badge>
            <i v-if="scope.row.batchType===2||scope.row.interviewerFilingState===-1" :class="'custom icon_c_-1'" />
            <i v-else-if="scope.row.interviewerFilingState===0" class="custom icon_c_1" @click="doit(scope.row.id,5)" style="cursor: pointer;" />
            <el-tooltip v-else-if="scope.row.interviewerFilingState===1" :content="scope.row.interviewerFilingSubmitTime+'提交'" placement="top" :open-delay="600">
              <i :class="'custom icon_c_2'" @click="doit(scope.row.id,5)" style="cursor: pointer;" />
            </el-tooltip>
            <el-tooltip v-else-if="scope.row.interviewerFilingState===5" :content="scope.row.interviewerFilingSubmitTime+'退回，原因：'+scope.row.interviewerFilingRemark" placement="top" :open-delay="600">
              <i :class="'custom icon_c_3'" @click="doit(scope.row.id,5)" style="cursor: pointer;" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="面试成绩上传" width="110">
          <template slot-scope="scope">
            <el-badge style="float:right" v-if="scope.row.interviewResultsNew&&scope.row.interviewResultsState===5" is-dot class="item"> </el-badge>
            <i v-if="scope.row.batchType===2||scope.row.interviewResultsState===-1" :class="'custom icon_c_-1'" />
            <i v-else-if="scope.row.interviewResultsState===0" class="custom icon_c_1" @click="doit(scope.row.id,6)" style="cursor: pointer;" />
            <el-tooltip v-else-if="scope.row.interviewResultsState===1" :content="scope.row.interviewResultsSubmitTime+'提交'" placement="top" :open-delay="600">
              <i :class="'custom icon_c_2'" @click="doit(scope.row.id,6)" style="cursor: pointer;" />
            </el-tooltip>
            <el-tooltip v-else-if="scope.row.interviewResultsState===5" :content="scope.row.interviewResultsSubmitTime+'退回，原因：'+scope.row.interviewResultsRemark" placement="top" :open-delay="600">
              <i :class="'custom icon_c_3'" @click="doit(scope.row.id,6)" style="cursor: pointer;" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="拟聘人选公示" width="350">
          <template slot-scope="scope">
            <i v-if="scope.row.candidateAnnouncementState===-1" :class="'custom icon_c_-1'" />
            <el-steps v-else :active="scope.row.candidateAnnouncementState===5?0:scope.row.candidateAnnouncementState" finish-status="success" :process-status="(scope.row.candidateAnnouncementState===0||scope.row.candidateAnnouncementState===5||scope.row.candidateAnnouncementState===3)?'finish':(scope.row.candidateAnnouncementState===5?'error':'process')">
              <el-step :title="scope.row.candidateAnnouncementState===5?'退回':'填报'" icon="el-icon-edit" @click.native="doit(scope.row.id,7)" style="cursor: pointer;"></el-step>
              <el-step title="预审" icon="el-icon-s-claim"></el-step>
              <el-step title="终审" icon="el-icon-s-claim"></el-step>
              <el-step v-if="scope.row.candidateAnnouncementState===3||scope.row.candidateAnnouncementState===4" title="发布" icon="el-icon-s-order" @click.native="doit(scope.row.id,7)" style="cursor: pointer;"></el-step>
              <el-step v-else title="发布" icon="el-icon-s-order"></el-step>
            </el-steps>
          </template>
        </el-table-column>
        <el-table-column label="聘用人选备案" width="110">
          <template slot-scope="scope">
            <el-badge style="float:right" v-if="scope.row.candidateRegistrationNew&&scope.row.candidateRegistrationState===5" is-dot class="item"> </el-badge>
            <i v-if="scope.row.candidateRegistrationState===0" class="custom icon_c_1" @click="doit(scope.row.id,8)" style="cursor: pointer;" />
            <el-tooltip v-else-if="scope.row.candidateRegistrationState===1" :content="scope.row.candidateRegistrationSubmitTime+'提交'" placement="top" :open-delay="600">
              <i :class="'custom icon_c_2'" @click="doit(scope.row.id,8)" style="cursor: pointer;" />
            </el-tooltip>
            <el-tooltip v-else-if="scope.row.candidateRegistrationState===5" :content="scope.row.candidateRegistrationSubmitTime+'退回，原因：'+scope.row.candidateRegistrationRemark" placement="top" :open-delay="600">
              <i :class="'custom icon_c_3'" @click="doit(scope.row.id,8)" style="cursor: pointer;" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="落户备案" width="80">
          <template slot-scope="scope">
            <el-badge style="float:right" v-if="scope.row.settlementRegistrationNew&&scope.row.settlementRegistrationState===5" is-dot class="item"> </el-badge>
            <i v-if="scope.row.settlementRegistrationState===0" class="custom icon_c_1" @click="doit(scope.row.id,9)" style="cursor: pointer;" />
            <el-tooltip v-else-if="scope.row.settlementRegistrationState===1" :content="scope.row.settlementRegistrationSubmitTime+'提交'" placement="top" :open-delay="600">
              <i :class="'custom icon_c_2'" @click="doit(scope.row.id,9)" style="cursor: pointer;" />
            </el-tooltip>
            <el-tooltip v-else-if="scope.row.settlementRegistrationState===5" :content="scope.row.settlementRegistrationSubmitTime+'退回，原因：'+scope.row.settlementRegistrationRemark" placement="top" :open-delay="600">
              <i :class="'custom icon_c_3'" @click="doit(scope.row.id,9)" style="cursor: pointer;" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" v-if="isReviewUser">
          <template slot-scope="scope">
            <el-button type="primary" @click="audit(scope.row.batchId)">预审</el-button>
          </template>
        </el-table-column>
      </el-table>
    <div class="block" style="background:#F5F7FA;overflow:hidden">
      <div id="legent">
        <!-- <div><b>图例</b></div> -->
        <i class="custom icon_c_0"></i><div>未办理</div>
        <i class="custom icon_c_-1"></i><div>无需办理</div>
        <i class="custom icon_c_1"></i><div>待办理</div>
        <i class="custom icon_c_3"></i><div>已退回</div>
        <i class="custom icon_c_2"></i><div>已完成</div>
      </div>
    </div>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      timestamp: '',
      changeType: '',
      substep: '',
      steppersonId: '',
      personId: '',
      jdcchuzhang: '',
      chuzhangs: [],
      tasknum: '',
      filters: {
        status: 1,
        personName: '',
        unitName: '',
        year: null
      },
      selectionlist: [],
      totalnum: 0,
      pageNum: 1,
      pageSize: 20,
      listLoading: true,
      changeSizeFlag: false,
      unitName: '',
      necessaryItems: [],
      mangeDep: [],
      tableHeight: 100,
      userRoles: '',
      jdcuserlist: [],
      jdcsetting: [],
      jdc1: '',
      jdc2: '',
      jdc3: '',
      jdc4: '',
      isReviewUser: null
    }
  },
  methods: {
    ftypename (type) {
      switch (type) {
        case 1:
          return '应届毕业生招聘'
        case 2:
          return '在职人员招聘'
        case 3:
          return '其他招聘'
      }
    },
    doit (id, step) {
      this.$router.push({name: 'recruitUnitDetail', query: {step: step, unitBatchId: id}})
    },
    audit (id) {
      this.$router.push({name: 'recruitUnitAudit', query: {id: id}})
    },
    getList () {
      let para = {
        'pageNum': 1,
        'pageSize': 10000
      }
      this.listLoading = true
      this.$http
        .post(this.$http.defaults.recruitAPI + `api/recruitBusBatch/queryMyUnitBatchByPage`, para)
        .then(response => {
          this.listLoading = false
          this.selectionlist = response.data.result.records
          this.isReviewUser = response.data.result.isReviewUser
        })
        .catch(error => {
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
          this.listLoading = false
        })
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        // obj.tableHeight = clientHeight - 292
        obj.tableHeight = clientHeight - 232
      })
    }
  },
  mounted () {
    this.getList()
    this.tableresize(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>
<style>
.selectioncontent{
  border-bottom:1px solid #333;
  padding:5px !important;
}
  .pointtab .el-badge__content.is-fixed{
    right: -5px;
    top:18px;
  }
  .pointtab{
    padding-right:22px;
  }
  .pointRadio .el-badge__content.is-fixed{
    right: -5px;
    top:6px;
  }
  .pointRadio .el-radio-button__inner{
    height:40px;
    padding-left:15px;
    padding-right:42px;
  }
#recruitlist .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
  border-bottom:1px solid #95B8E7;
}
#recruitlist .el-table td, #recruitlist .el-table th.is-leaf{
  border-right:1px solid #95B8E7;
}
  .wboxd .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    text-align: center;
    border-right: #95B8E7 solid 1px;
    border-bottom: #95B8E7 solid 1px;
    min-height: 30px;
    line-height:30px;
  }
  .wboxd .el-table td{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体',
  }
  .tableth{
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    height:33px;
  }
  #recruitlist .wboxs{
    height:45px;
    padding-top:10px;
  }
  #recruitlist .el-table__row{
    height: 50px;
  }
  #recruitlist #legent{
    float:right;
    margin-right: 20px;
  }
  #recruitlist #legent div{
    float:left;
    line-height: 42px;
    font-size:var(--size12);
  }
  #recruitlist #legent i{
    width: 30px;
    height: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    float: left;
    display: block;
    margin:5px 0px 0 3px;
  }
  #recruitlist #selectionindexlist .cell i.custom{
    width: 30px;
    height: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    float: center;
    display: block;
    margin:0 auto;
  }
  #recruitlist #selectionindexlist .cell button i{
    width: var(--size14);
    height: var(--size14);
  }
  #recruitlist .icon_c_0{
    background-image: url(../assets/icon_selection_index0.png)
  }
  #recruitlist .icon_c_1{
    background-image: url(../assets/icon_selection_index2.gif)
  }
  #recruitlist .icon_c_2{
    background-image: url(../assets/icon_selection_index1.png)
  }
  #recruitlist .icon_c_-1{
    background-image: url(../assets/icon_selection_index-1.png)
  }
  #recruitlist .icon_c_3{
    background-image: url(../assets/icon_selection_index3.png)
  }
  #recruitlist .icon_c_3a{
    background-image: url(../assets/icon_selection_index4t.png)
  }
  #recruitlist .icon_c_3b{
    background-image: url(../assets/icon_selection_index3b.png)
  }
  #recruitlist .icon_c_4{
    background-image: url(../assets/icon_selection_index4t.png)
  }
  #recruitlist .icon_c_5{
    background-image: url(../assets/icon_selection_index4r.png)
  }
  #recruitlist .icon_gd_0{
    background-image: url(../assets/icon_selection_gd0.png)
  }
  #recruitlist .icon_gd_1{
    background-image: url(../assets/icon_selection_gd1.gif)
  }
  #recruitlist .icon_gd_2{
    background-image: url(../assets/icon_selection_gd2.png)
  }
  #recruitlist .icon_gd_4{
    background-image: url(../assets/icon_selection_gd4.png)
  }
  #recruitlist .el-step__title.is-finish {
    color: #409EFF;
  }
  #recruitlist .el-step__title {
    font-size:12px;
    line-height: 22px;
    padding-left: 8px;
  }
  #recruitlist .el-steps{
    margin:10px 0;
  }
  .el-tooltip__popper.is-dark{
    font-size:var(--size18) !important;
  }
  .el-tabs--card>.el-tabs__header {
    border-bottom: 1px solid #9CA3B3;
  }
  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: 1px solid #9CA3B3;
    border-bottom: 0;
  }
  .el-tabs--card>.el-tabs__header .el-tabs__item {
    border-left: 1px solid #9CA3B3;
    /* background-color: #F0F0F0; */
  }
  .el-tabs__item.is-active {
    color: #0000FF !important;
    font-weight: bolder !important;
    /* background-color: #fff !important; */
    /* border-bottom: 2px solid #9CA3B3 !important; */
  }
</style>
<style scoped>
  .el-tooltip__popper{
    font-size:var(--size) !important;
  }
  h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  .el-pagination{
    float: left;
    padding:7px 10px;
  }
  .wboxs{
    padding:5px 15px;
    width: calc(100% - 30px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
  .wboxd{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
</style>
